<template>
    <div class="detail-process">
        <van-nav-bar title="订单详情" left-text="返回" left-arrow @click-left="onClickLeft" />

        <van-collapse v-model="activeNames" :accordion="true">
			<van-collapse-item name="1">
				<template slot="title">
					订单信息
				</template>
				<template slot="value">
					查看详情
				</template>
				<template slot="default">
                    <viewOrderTemplate :dataResouce="dataResouce" :pageDataList="pageDataList"></viewOrderTemplate>
                    <!-- 内容审核文件 -->
                    <!-- <div class="auditFile">
                        <van-cell :border="false">
                            <template slot="icon">
                                <span class="custom-title" style="margin-right: 15px; width: 170px">内容审核文件：</span>
                                <div style="width: 100%">
                                    <a v-for="file in details.review_file && details.review_file.indexOf('&') ? details.review_file.split('&') : details.review_file" :key="file"
                                        :href="`${baseUrls}/api/download?path=${file}`">
                                        <van-icon name="orders-o" size="22px" color="#2d8cf0"/>
                                    </a>
                                </div>
                            </template>
                        </van-cell>
                    </div> -->
				</template>
			</van-collapse-item>
            <van-collapse-item name="2">
				<template slot="title">
					流程步骤
				</template>
				<template slot="value">
					查看详情
				</template>
				<template slot="default">
                    <van-steps direction="vertical" :active="0">
                        <van-step v-for="status in details.statuss" :key="status.id">
                            <h3>提交时间：{{status.created_at}}</h3>
                            {{ status.name }}
                            <p v-if="status.name.includes(['内审文件撰写中'])">代理人：{{details.agent.name}} 接单 </p>
                            <p v-if="status.name.includes(['发明人提交成功,等待分配代理人'])">发明人：{{details.liaisons}} 提交成功</p>
                        </van-step>
                    </van-steps>
				</template>
			</van-collapse-item>
            <van-collapse-item name="3">
				<template slot="title">
					审批意见
				</template>
				<template slot="value">
					查看详情
				</template>
				<template slot="default">
                    <div v-if="details.opinions && details.opinions.length>0">
                        <van-steps direction="vertical" :active="0">
                            <van-step v-for="opinion in details.opinions" :key="opinion.id">
                                <h3>{{opinion.created_at}}</h3>
                                <p>{{ opinion.review_user }} {{opinion.review}}</p>
                            </van-step>
                        </van-steps>
                    </div>
                    <div v-else style="min-height: 80px; line-height: 80px; text-align: center;">
                        暂无审批意见
                    </div>
				</template>
			</van-collapse-item>
		</van-collapse>

        <!-- 订单信息 -->
        <!-- <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">订单信息</van-divider> -->
        <!-- <van-tabs v-model="activeName" animated>
            <van-tab title="订单信息" name="订单信息">
                <viewOrderTemplate :dataResouce="dataResouce" :pageDataList="pageDataList"></viewOrderTemplate>

                <div class="auditFile">
                    <van-cell :border="false">
                        <template slot="icon">
                            <span class="custom-title" style="margin-right: 15px; width: 170px">内容审核文件：</span>
                            <div style="width: 100%">
                                <a v-for="file in details.review_file && details.review_file.indexOf('&') ? details.review_file.split('&') : details.review_file" :key="file"
                                    :href="`${baseUrls}/api/download?path=${file}`">
                                    <van-icon name="orders-o" size="22px" color="#2d8cf0"/>
                                </a>
                            </div>
                        </template>
                    </van-cell>
                </div>
            </van-tab>
            <van-tab title="流程进度" name="流程进度">
                <van-steps direction="vertical" :active="0">
                    <van-step v-for="status in details.statuss" :key="status.id">
                        <h3>提交时间：{{status.created_at}}</h3>
                        {{ status.name }}
                        <p v-if="status.name.includes(['内审文件撰写中'])">代理人：{{details.agent.name}} 接单 </p>
                        <p v-if="status.name.includes(['发明人提交成功,等待分配代理人'])">发明人：{{details.liaisons}} 提交成功</p>
                    </van-step>
                </van-steps>
            </van-tab>
            <van-tab title="审批意见" name="审批意见">
                <div v-if="details.opinions">
                    <van-steps direction="vertical" :active="0">
                        <van-step v-for="opinion in details.opinions" :key="opinion.id">
                            <h3>{{opinion.created_at}}</h3>
                            <p>{{ opinion.review_user }} {{opinion.review}}</p>
                        </van-step>
                    </van-steps>
                </div>
                <div v-else style="min-height: 80px; line-height: 80px; text-align: center;">
                    暂无审批意见
                </div>
            </van-tab>
        </van-tabs> -->
    </div>
</template>

<script>
import { downLoadFiles } from '~/util/downLoad'
import viewOrderTemplate from '~/components/_viewOrder'
import { getCurrentOrderList } from '~/api/commonApi'

export default {
    data() {
        return {
            activeNames: '1',
            details: [],
            tabActive: 0,
            activeName: "订单信息",
            dataResouce: [],
            baseUrls: global.baseurl,
            typeList: { S: '实用新型', F: '发明专利', W: '外观设计'},
            pageDataList: ['订单编号', '专利类型', '扣款情况', '扣款类型', '结算状态', '结算金额', '结算类型', '修改时间'],
            // pageDataList: ['专利名称', '专利类型', '订单编号', '订单状态', '联络人邮箱', '联络人电话', '技术领域', '技术背景', '技术问题', '技术方案', '项目优势', '具体实施方式', '附图', '附件']
        }
    },
    created() {
        this.details = this.$store.state.orderDetailList
    },
    //缓存也会走的钩子
    deactivated(){
        this.$destroy(true);//销毁组件
    },
    activated() {
        let id = this.$route.params.id
        getCurrentOrderList(this.$axios, id).then(res => {
            if(res.status === 200) {
                this.details = res.data.data
                this.dataResouce = [
                    { label: '订单编号', value: this.details.final_orders[0] ? this.details.final_orders[0].order_number : '暂无' },
                    { label: '专利类型', value: this.details.final_orders[0] && this.details.final_orders[0].type ? this.typeList[this.details.final_orders[0].type] : '暂无' },
                    { label: '扣款情况', value: '暂无' },
                    { label: '扣款类型', value: '暂无' },
                    { label: '结算状态', value: this.details.final_orders[0] ? this.details.final_orders[0].accounts[0] ? this.details.final_orders[0].accounts[0].status : '暂无' : '暂无' },
                    { label: '结算金额', value: this.details.final_orders[0] ? this.details.final_orders[0].accounts[0] && this.details.final_orders[0].accounts[0].type ? this.details.final_orders[0].accounts[0].type.amount : '暂无' : '暂无' },
                    { label: '结算类型', value: this.details.final_orders[0] ? this.details.final_orders[0].accounts[0] && this.details.final_orders[0].accounts[0].type ? this.details.final_orders[0].accounts[0].type.name : '暂无' : '暂无' },
                    { label: '修改时间', value: this.details.final_orders[0] ? this.details.final_orders[0].accounts[0] && this.details.final_orders[0].accounts[0].type ? this.details.final_orders[0].accounts[0].type.created_at : '暂无' : '暂无' },

                    // { label: '订单编号', value: this.details.order_number },
                    // { label: '专利名称', value: this.details.patent_name },
                    // { label: '专利类型', value: this.details.type },
                    // { label: '订单状态', value: this.details.status },
                    // { label: '联络人邮箱', value: this.details.liaisons_email },
                    // { label: '联络人电话', value: this.details.liaisons_tel },
                    // { label: '技术领域', value: this.details.territory },
                    // { label: '技术背景', value: this.details.background },
                    // { label: '技术问题', value: this.details.problem },
                    // { label: '技术方案', value: this.details.plan },
                    // { label: '项目优势', value: this.details.advantage },
                    // { label: '具体实施方式', value: this.details.way },
                    // { label: '附图', value: this.details.img },
                    // { label: '附件', value: this.details.file }
                ]
            }
        })
    },
    methods: {
        onClickLeft() {
            this.$router.go(-1);
        }
    },
    components: {
        viewOrderTemplate
    }
}
</script>

<style lang="less" scoped>
    .detail-process{

        /deep/ .van-collapse-item__content{
			padding: 0;
		}

		/deep/ .van-cell__right-icon{
			display: none;
		}
        
        .context{
            padding: 20px;
            text-align: left;
        }

        .van-field__label{
            width: 100px
        }

        .van-step__title{
            h3,
            h4,
            p{
                margin: 0;
            }
            
            h3{
                margin-bottom: 40px;
                font-size: 30px;
            }

            h4,p{
                margin: 10px;
                font-size: 14px;
                font-weight: 500;
            }
        }
    }
</style>